.gameCard {
  background-color: var(--gradient-gamecard);
  text-align: start;
  width: 100%;
  overflow: hidden;
  position: relative;
  transition-duration: 0.1s;
  box-shadow: 0px 0px 12px 4px #00000055;
  display: flex;
  flex-direction: column;
  border-radius: var(--space-3xs);
  animation: fade-in 0.1s ease-in;
  aspect-ratio: 173/275;
}

.gameCard.gamepad {
  aspect-ratio: 3/4;
}

.gameCard.justPlayed {
  aspect-ratio: 275/205;
}

.gameCard.gamepad.justPlayed {
  aspect-ratio: 328/205;
}

.gameCard:focus-within {
  outline: -webkit-focus-ring-color auto 1px;
}

.gameCard > .gameCardStatus {
  position: absolute;
  z-index: 5;
  top: 5px;
  left: 5px;
  max-width: 110px;
  font-weight: var(--semibold);
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.418) 2.4%,
    rgba(20, 21, 21, 0.863) 30%
  );
  padding: var(--space-3xs) var(--space-2xs);
  border-radius: 4px;
  color: var(--success);
}
.gameCard > .gameCardStatus svg {
  color: var(--success);
  height: 20px;
}

.gameCard.notAvailable > .gameCardStatus {
  color: var(--text-log);
  text-align: end;
}

.gameCard > a {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.gameCard .gameImg {
  width: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
  display: block;
}

.gameCard.justPlayed .justPlayedImg {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

.gameCard .gameLogo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50%;
}

.gameCard .gameListInfo {
  display: none;
}

.gameCard .gameTitle {
  position: absolute;
  width: 100%;
  bottom: 0px;
  padding: 0.6rem 0.3rem;
  color: var(--text-secondary);
  background: var(--gamecard-title-color);
  transition: 200ms;
  font-family: var(--primary-font-family);
  font-size: var(--text-md);
  font-weight: var(--bold);
  line-height: 17px;
  cursor: pointer;
  z-index: 3;
  pointer-events: none;
  transform: translateY(100%);
}

.gameCard:hover .gameTitle,
.titlesAlwaysVisible .gameTitle {
  display: block;
  transform: translateY(0);
}

.gameCard > .icons {
  background: var(--icons-background);
  justify-content: space-around;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: 'update settings play';
  padding: var(--space-xs-fixed);
}

.gameCard.justPlayed > .icons {
  justify-content: right;
  grid-template-columns: 0.3fr 1fr 0.4fr 0.5fr;
  grid-template-areas: 'update gap settings play';
}

.gameCard.justPlayed.hidden .justPlayedImg {
  opacity: 0.2;
}

.gameCard.gamepad > .icons {
  display: none;
}

.gameCard > .icons > .svg-button {
  justify-self: center;
}

.gameCard .store-icon {
  border-radius: 10px;
  position: absolute;
  right: 5px;
  top: 4px;
  z-index: 2;
  padding: var(--space-3xs);
  width: 35px;
  height: 35px;
  place-content: center;
  background: var(--background-darker);
  fill: var(--text-default);
}

.gameCard:hover,
.gameCard:focus-within {
  transform: scale(1.05);
}

.gameCard.hidden .gameImg,
.gameCard.hidden .gameLogo {
  opacity: 0.2;
}

.gameCard.notAvailable .gameImg.installed,
.gameCard.notAvailable .gameLog.installed {
  filter: sepia(100%);
  opacity: 0.7;
}

.gameCard .runner {
  display: none;
}

.gameListItem {
  display: grid;
  grid-template-columns: 90% 10%;
  grid-template-areas: 'link action';
  align-items: center;
  position: relative;
  cursor: default;
  place-self: center;
  width: 100%;
  padding: var(--space-xs-fixed) 0;
  border-bottom: 1px solid gray;
}

.gameListItem > a > * {
  transition: 300ms;
}

.gameListItem > a {
  grid-area: link;
  display: grid;
  grid-template-columns: 3fr 2fr 1fr;
  position: relative;
  width: 100%;
  height: 100%;
  grid-template-areas: 'name infos runner';
  overflow: hidden;
  align-items: center;
  justify-items: baseline;
}

.gameListItem .runner {
  grid-area: runner;
}

.gameListItem .gameImg,
.gameListItem .store-icon,
.gameListItem .gameLogo {
  display: none;
}

.gameListItem .gameListInfo {
  font-size: var(--text-md);
  grid-area: infos;
}

.gameListItem .gameTitle {
  grid-area: name;
  font-size: var(--text-md);
  padding-inline-end: var(--space-md-fixed);
  text-align: start;
}

.gameListItem .installed {
  color: var(--accent);
  font-weight: var(--bold);
}

.gameListItem .active {
  color: var(--success);
}

.gameListItem > a:hover,
.gameListItem > a:focus-within {
  color: var(--accent-overlay);
}

.gameListItem .gameTitle span {
  display: inline;
}

.gameListItem > .icons {
  padding: 0px var(--space-2xs-fixed);
  grid-area: action;
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-areas: 'update settings play';
}

.gameListItem > .gameCardStatus {
  display: none;
}

.gameListItem > .gameCardStatus > svg {
  position: relative;
  bottom: 0;
  top: 0;
}

.gameListItem span {
  transition: 300ms;
}

.gameListItem.installed.notAvailable span {
  color: var(--status-warning, var(--text-secondary));
}

.gameListItem.installed.notAvailable:hover span {
  color: var(--status-warning-hover, var(--text-default));
}

.gameListItem.installed:not(.notAvailable) span {
  color: var(--status-sucess, var(--success));
}

.gameListItem.installed:not(.notAvailable):hover span {
  color: var(--status-success-hover, var(--accent));
}

.gameCardStatus > svg {
  cursor: pointer;
  z-index: 7;
}

.gameImg,
.gameLogo {
  transition:
    all 0.2s,
    opacity 0.5s;
}

.gameImg:not(.installed),
.gameLogo:not(.installed) {
  filter: grayscale(var(--installing-effect));
}

.gameCard:hover .gameImg:not(.installed),
.gameCard:hover .gameLogo:not(.installed),
.allTilesInColor .gameImg,
.allTilesInColor .gameLogo {
  filter: grayscale(0);
}

.icons {
  align-self: flex-end;
  width: 100%;
  display: flex;
  justify-content: flex-end;
  z-index: 4;
  padding: var(--space-md-fixed);
  transition: 300ms;
}

.icons > button > svg,
.icons > a > svg,
.icons > svg {
  height: clamp(28px, 1vw, 36px);
  aspect-ratio: 1;
  display: block;
}

.playIcon,
.downIcon,
.notAvailableIcon,
.iconDisabled,
.queueIcon,
.cancelIcon {
  grid-area: play;
  transition: all 300ms;
}

.playIcon > span {
  font-family: var(--secondary-font-family);
  border-radius: 5px;
  color: #1d1d1d;
  cursor: pointer;
  padding: var(--space-xs-fixed);
  background: var(--success);
  color: var(--text-tertiary);
  font-weight: 500;
  font-size: 15px;
  text-align: center;
}

.playIcon:hover > span {
  transition: 300ms;
  background: var(--success-hover);
}

.playIcon[disabled] > span {
  background: var(--icon-disabled);
}

.icons path,
.icons circle {
  transition: 300ms;
}

.playIcon circle {
  fill: var(--success);
}

.playIcon:hover circle {
  fill: var(--success-hover);
}

.downIcon circle {
  fill: var(--accent);
}

.downIcon:hover circle {
  fill: var(--accent-overlay);
}

.cancelIcon svg circle {
  fill: var(--cancel-button, var(--warning));
}

.cancelIcon:hover svg circle {
  fill: var(--cancel-button-overlay, var(--warning-hover));
}

.queueIcon svg {
  fill: var(--cancel-button, var(--warning));
  font-size: 40px;
}

.queueIcon:hover svg {
  fill: var(--cancel-button-overlay, var(--warning-hover));
}

.notAvailableIcon circle {
  fill: var(--status-warning, var(--warning));
}

.notAvailableIcon:hover circle {
  fill: var(--status-warning-hover, var(--warning));
}

.iconDisabled circle,
.svg-button[disabled] circle {
  fill: var(--icon-disabled);
}

.iconDisabled > * {
  cursor: initial;
}

.updateIcon {
  grid-area: update;
}

.updateIcon svg {
  color: var(--accent);
}

.updateIcon:hover svg {
  color: var(--accent-overlay);
}

.settingsIcon {
  grid-area: settings;
}

.settingsIcon path {
  fill: var(--neutral-06, var(--accent-overlay));
}

.settingsIcon:focus-within,
.settingsIcon:hover path {
  fill: var(--text-secondary, var(--accent));
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
